<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-28 13:28:16
 * @LastEditors: 刘引
 * @LastEditTime: 2022-01-04 16:46:12
-->
<template>
  <div class="service" v-if="this.$store.state.isChange == false">
    <div class="w">
      <div class="title">
        <p>
          <span>丰富、安全、稳定</span>
          的产品及服务
        </p>
      </div>
      <div class="product">
        <div class="card-left">
          <ul>
            <li>
              <img src="../../../assets/img/home/card-left.png" />
            </li>
            <li>
              <h3>100%原装电子元器件</h3>
            </li>
            <li>
              <p>
                承诺供应元器件皆为原装，品质可追溯,国际一流元器件
                元器件合格检测报告,符合ISO9001：2015质量管理体系认证
              </p>
            </li>
            <li class="btn">
              <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">了解详情</a>
            </li>
          </ul>
        </div>
        <div class="card-right">
          <ul>
            <li>
              <img src="../../../assets/img/home/card-right.png" />
            </li>
            <li>
              <h3>3300000+型号数据库</h3>
            </li>
            <li>
              <p>
                数字化在线电商平台24小时提供所有型号库存行情
                2500家全球战略采购渠道,提供有市场竞争力的低成本采购方案
              </p>
            </li>
            <li class="btn special">
              <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">了解详情</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="service" v-if="this.$store.state.isChange">
    <div class="w">
      <div class="title">
        <p>
          <span>Diverse, safe and stable</span>
          Diverse, safe and stable
        </p>
      </div>
      <div class="product">
        <div class="card-left">
          <ul>
            <li>
              <img src="../../../assets/img/home/card-left.png" />
            </li>
            <li>
              <h3>100% original binding electronic components</h3>
            </li>
            <li>
              <p>Ensure that all components are original. Quality can be traced, products come from reliable suppliers</p>
            </li>
            <li class="btn">
              <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">Learn more</a>
            </li>
          </ul>
        </div>
        <div class="card-right">
          <ul>
            <li>
              <img src="../../../assets/img/home/card-right.png" />
            </li>
            <li>
              <h3>3.3 million plus parts databases</h3>
            </li>
            <li>
              <p>Taoxin has the contacts and sourcing to find more than 2500 supplier around the world, we are able to provide for you in a good prices.</p>
            </li>
            <li class="btn special">
              <a href="tencent://message/?uin=2355608068&Site=Sambow&Menu=yes">Learn more</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script></script>
<style lang="scss" scoped>
.service {
  height: 595px;
  margin-top: 52px;
  .w {
    .title {
      text-align: center;
      p {
        font-size: 36px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        span {
          color: #0c7fea;
        }
      }
    }
    .product {
      display: flex;
      justify-content: space-between;
      .card-left,
      .card-right {
        width: 580px;
        height: 485px;
        background-color: #ffffff;
        box-shadow: 0px 3px 15px 0px rgba(56, 76, 120, 0.2);
        margin-top: 67px;
        padding: 20px;
        ul {
          li {
            text-align: center;
            img {
              width: 538px;
              height: 220px;
              margin-bottom: 20px;
              border-radius: 8px;
            }
            h3 {
              margin-bottom: 20px;
              font-size: 24px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #0c7fea;
            }
            p {
              margin-bottom: 20px;
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 30px;
              letter-spacing: 0px;
              color: #666666;
            }
          }
          .btn {
            margin: 0 auto;
            width: 288px;
            text-align: center;
            font-size: 20px;
            font-weight: normal;
            line-height: 58px;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            border-radius: 8px;
            height: 58px;
            background-color: #0c7fea;
            box-shadow: 0px 5px 15px 0px rgba(32, 125, 226, 0.3);
            cursor: pointer;
            &:hover {
              background-color: #185bb1;
              transition: all 0.2s;
            }
            a {
              display: block;
              width: 288px;
              height: 58px;
            }
          }
          .special {
            background-color: #ffffff;
            border: solid 1px #0c7fea;
            box-shadow: none;
            font-size: 20px;
            color: #0c7fea;
            a {
              color: #0c7fea;
            }
            &:hover {
              transition: all 0.2s;
              background-color: #327fe3;
              a {
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>